<template>
	<view class="configFontsize">
    <div
      :class="item.ischecked === false ? 'boxComNoCheck' : 'boxComChecked'"
      v-for="(item,index) in list"
      :key="index"
      @click="changeCheck(index)">
      {{ item.name }}
    </div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        defaultChecked: 1,
				list: [
          {
            name:'衣服',
            ischecked: true
          },
          {
            name:'裤子',
            ischecked: false
          },
          {
            name:'鞋子',
            ischecked: false
          },
          {
            name:'手机',
            ischecked: false
          }
        ]
			}
		},
		methods: {
			changeCheck(v){
        const arr = this.list
        for (const element of arr) {
          element.ischecked = false
        }
        arr[v].ischecked = true
        this.list = arr
      }
		}
	}
</script>

<style scope lang="scss">
  @import "@/common/configStyle.scss";

  .configFontsize {
    font-size: $ruyi-config-fontsize;
    width: 100%;
  }
  
  .boxComNoCheck {
    background-color: $ruyi-config-backColor;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
  .boxComChecked {
    background-color: #fff;
    color: #f00;
    font-weight: $ruyi-config-fontWight;
    width: 100%;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
  
</style>
